<script lang="ts" setup>
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'
</script>

<template>
    <div class="educ-carousel">
        <a-carousel arrows :speed="1000" :autoplaySpeed="4000"  autoplay effect="fade">
            <!-- 切换键 -->
            <template #prevArrow>
                <div class="custom-slick-arrow" style="left: .625rem; z-index: 1">
                    <left-circle-outlined />
                </div>
            </template>
            <template #nextArrow>
                <div class="custom-slick-arrow" style="right: .625rem">
                    <right-circle-outlined />
                </div>
            </template>
            <div class="educ-carousel-swiper">
                <img src="@/assets/爱国教育.png" alt="">
            </div>
            <div class="educ-carousel-swiper">
                <img src="@/assets/爱国教育1.jpg" alt="">
            </div>
            <div class="educ-carousel-swiper">
                <img src="@/assets/爱国教育2.jpg" alt="">
            </div>
            <div class="educ-carousel-swiper">
                <img src="@/assets/爱国教育3.png" alt="">
            </div>
        </a-carousel>
    </div>

</template>

<style scoped lang="scss">
.educ-carousel {
  margin-bottom: 3.125rem;

  &-swiper {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

/* For demo */
:deep(.slick-slide) {
  overflow: hidden;
  text-align: center;
}

:deep(.slick-arrow.custom-slick-arrow) {
  z-index: 1;
  width: $educ-width-height-base1;
  height: $educ-width-height-base1;
  font-size: $educ-width-height-base1;
  color: #fff;
  background-color: rgb(31 45 61 / 11%);
  opacity: 0.3;
  transition: ease all 0.3s;
}

:deep(.slick-arrow.custom-slick-arrow::before) {
  display: none;
}

:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}

:deep(.slick-slide h3) {
  color: #fff;
}
</style>
